<template>
    <div>
        <h1>会员等级列表</h1>
        <input type="button" value="新增会员等级" class="btn btn-primary" @click="levelok">

        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>Id</td>
                    <td>等级名称</td>
                </tr>
                <tr v-for="item in queryLevel.LevelName" :key="item.Id">
                    <td>{{item.Id}}</td>
                    <td>{{item.LevelName}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'
const router = useRouter()
const levelok = () => {
    router.push('/memberleveladd')
}


//接受后端返回的数据
let queryLevel:any = reactive({
    LevelName:[],
})

//页面一打开就需要获取会员等级列表
onMounted(() => {
    getLevelList();
})

//获取会员等级列表
const getLevelList = () => {
    axios({
        url:'/api/Member/GetMemberLevels',
        method:'get',
    })
    .then((res) => {
        console.log(res);
        //需要存储起来
        queryLevel.LevelName = res.data;
    })
    .catch((err) => {
        console.log(err);
    })
}



</script>

<style scoped>

</style>